import React from 'react';
import ReactDOM from 'react-dom';
import "@/pages/Index/Index.scss";
import {ConatainHeader} from "@/component/ConatainHeader";
import {Layout_Contain_index} from "@/layout/Layout_Contain/Layout_Contain_index";
import {Card} from "@/component/Card";

let demo_url = "http://pic.rmb.bdstatic.com/9619bd4b6f54160c5c81c6525f35f88b.jpeg";

interface IProps {
    color: string,
    size?: string,
}

interface IState {
    count: number,
}

export class Index extends React.Component<IProps, IState> {
    public state = {
        count: 1,
        hot_video_list: [{
            name: "后宫番",
            id: ""
        }, {
            name: "泡面番",
            id: ""
        }, {
            name: "治愈",
            id: ""
        }, {
            name: "搞笑",
            id: ""
        }, {
            name: "耽美",
            id: ""
        }, {
            name: "歌舞",
            id: ""
        }, {
            name: "校园",
            id: ""
        },
        ],
        videoSmale: [1, 2, 3, 4, 5, 6],
        sortList: [{
            name: "夏目友人帐",
            id: ""
        }, {
            name: "东京食尸鬼",
            id: ""
        }, {
            name: "银魂",
            id: ""
        }, {
            name: "元气少女缘结神",
            id: ""
        }, {
            name: "镇魂街",
            id: ""
        }, {
            name: "动物狂想曲",
            id: ""
        }
        ],
        videoCardList: [
            {
                id:1,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:2,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:3,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:4,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:5,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
            {
                id:6,
                list:[{
                    url: demo_url,
                    title: "2",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                }, {
                    url: demo_url,
                    title: "1",
                    num: 1,
                    id: ""
                },]
            },
        ],
    }

    public render() {
        let {hot_video_list, videoSmale, sortList, videoCardList} = this.state;
        return (<div className={'my_index'}>
            <ConatainHeader></ConatainHeader>
            <Layout_Contain_index>
                <div className={"top"}>
                    <img src={demo_url} alt=""/>
                </div>
                <div className={"hot_video"}>
                    <div className={"hot_video_top"}>
                        <div className={'hot_video_title'}>
                            <span className={'iconfont icon-shipin'}></span>
                            热推番剧
                        </div>
                        <div className={'hot_video_time'}>
                            <span className={'iconfont icon-shijian'}></span>
                        </div>
                        <nav>
                            {hot_video_list.map((ele,index) => {
                                return <span key={index}>{ele.name}</span>
                            })}
                        </nav>
                    </div>
                    <div className="hot_video_bottom">

                        <div className={'hot_video_bottom_left'}>
                            <div className={'bg_card'}>
                                <img src={demo_url} alt=""/>

                                <div className={'jieshao'}>
                                    <span>这是一个动漫名字</span>
                                    <div className={"hover_p"}>
                                        666666
                                    </div>
                                </div>
                            </div>
                            <div className={'bg_card_left'}>
                                {
                                    videoSmale.map((ele,index) => {
                                        return <div className={"small_card"} key={index}>
                                            <img src={demo_url} alt=""/>
                                            <div className={'jieshao'}>
                                                <span>这是一个动漫名字</span>
                                                <div className={"hover_p"}>
                                                    666666
                                                </div>
                                            </div>
                                        </div>
                                    })

                                }
                            </div>
                        </div>
                        <div className={'hot_video_bottom_right'}>
                            <div className={'hot_video_bottom_right_sort first'}>
                                一周排行榜
                            </div>
                            {
                                sortList.map((ele, index) => {

                                    return <div className={'hot_video_bottom_right_sort'} key={index}>
                                        <span>{`${index}.${ele.name}`}</span>
                                        <span className={'iconfont icon-jiantou'}></span>
                                    </div>
                                })
                            }
                        </div>

                    </div>
                </div>
                <div className={"hot_video_list"}>
                    <div className={'hot_video_title'}>
                        <span className={'iconfont icon-shipin'}></span>
                        热播电影
                    </div>
                    <div className={'video_list'}>
                        {videoCardList.map((ele,index) => {
                            let {list}=ele;
                            return <div key={ele.id+index}>
                                {list.map((ele1,index)=>{
                                    return <Card key={index} url={ele1.url} title={ele1.title} num={ele1.num}></Card>
                                })}
                            </div>
                        })}

                    </div>
                </div>

            </Layout_Contain_index>
        </div>)
    }
}